<template>
  <div class="eat">
    <div class="foodList">
      <div class="common_title_box">
        <p class="title">美食餐厅榜</p>
      </div>
      <div class="foodListContent">
        <div class="contentWrap" v-for="(item,index) in allFoodList">
          <van-image class="img" width="150px" height="175px" fit="contain" :src="item.indexDownImgUrl"/>
          <div class="itemWrap">
            <p class="foodListName">{{item.eatName}}</p>
            <p class="foodListOther">
              <span>{{item.eatScore}}分</span>
              &nbsp;&nbsp;<span>￥{{item.eatPrice}}/人</span>
            </p>
          </div>
        </div>
        <div class="more">
          查看更多
          <van-icon size=".4rem" class="moreIcon" name="upgrade" />
        </div>
      </div>
    </div>
    <div class="specialties">
      <div class="common_title_box">
        <p class="title">当地特色菜</p>
      </div>
      <div class="specialtiesList">
        <div class="specialtiesContent" v-for="(item,index) in allSpecialtiesList">
          <van-image round cover width="56px" height="56px" :src="item.indexDownImgUrl"/>
          <p class="specialtiesName">{{item.eatName}}</p>
        </div>
      </div>
      <div class="specialtiesSwiper">
        <Swiper :all-list="allMidList"></Swiper>
      </div>
    </div>
    <div >
      <Detail-food-information></Detail-food-information>
    </div>
  </div>
</template>

<script>
import Swiper from "@/utils/common/Swiper";
import DetailFoodInformation from "@/components/HomeEat/detailFoodInformation";
export default {
  name: "EatContent",
  components: {DetailFoodInformation, Swiper},
  data() {
    return {
      allFoodList: [],
      allSpecialtiesList: [],
      allMidList: [],

    }
  },
  mounted() {
    this.getFoodList();
    this.getSpecialtiesList();

  },
  methods: {
    getFoodList() {
      this.getRequest("/home/eat/foodList").then(res => {
        this.allFoodList = res.data;
      })
    },
    getSpecialtiesList() {
      this.getRequest("/home/eat/specialitesList").then(res => {
        this.allSpecialtiesList = res.data.slice(0,9);
        let _this = this;
        setTimeout( function () {
          _this.allMidList = res.data.slice(10,12)
        },1000)

      })
    },

  }
}
</script>

<style scoped>
.eat {
  position: relative !important;
}

.foodList, .specialties {
  margin: 9px 0 15px;
}

.common_title_box {
  height: 24px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

.common_title_box .title {
  font-size: 17px;
  line-height: 24px;
  color: #333333;
  padding-left: 10px;
  position: relative;
  flex: 1;

}

.common_title_box .title:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  background: #dd2626;
  border-radius: 5px;
  position: absolute;
  top: 4px;
  left: 0;
}
.foodListContent {
  height: 175px;
  display: flex;
  margin-top: 7px;
  overflow: auto;
  padding: 0 15px;
}

.foodListContent::-webkit-scrollbar{
  display: none;
}
.contentWrap {
  width: 150px;
  height: 175px;
  flex-shrink: 0;
  border-radius: 4px;
  position: relative;
  margin-right: 8px;

}
.van-image >>> .van-image__img {
  border-radius: 8px;
}

.itemWrap{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 94%;
  height: 115px;
  background-image: linear-gradient(180deg, rgba(34,34,34,0),#222222);
  border-radius: 0 0 4px 4px;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #ffffff;
}
.foodListName{
  font-size: 15px;
  line-height: 23px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.foodListOther{
  font-size: 11px;
  margin-bottom: 10px;
}
.more{
  align-self: center;
  box-sizing: content-box;
  padding: 0 10px;
  margin-top: -12px;
  width: 14px;
  height: 85px;
  right: .2rem;
  white-space: normal;
  font-size: 12px;
  color: #333333;
  text-align: left;
  line-height: 16px;
}
.moreIcon{
  transform: rotate(90deg);
  margin-left: -.05rem;
}

.specialtiesContent {
  float: left;
  margin: 0 10px;
  text-align: center;
}

.specialtiesList {
  display: flex;
  overflow: auto;
  height: 95px;
  margin: 10px 10px 0 10px;
}

.specialtiesList::-webkit-scrollbar{
  display: none;
}

.specialtiesName{
  font-size: 14px;
  color: #333333;
  line-height: 23px;
  margin-top: 4px;
  flex: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.specialtiesSwiper{
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
</style>